<template>
  <div id="app">
    <el-card shadow="hover">
      <el-table
          :data="studentlist"
          style="width: 100%">
        <el-table-column
            label="学号"
            align="center"
            prop="sid">
        </el-table-column>
        <el-table-column
            label="姓名"
            align="center"
            prop="sname">
        </el-table-column>
          <el-table-column
              label="性别"
              align="center"
              prop="sex">
          </el-table-column>
          <el-table-column
              label="年龄"
              align="center"
              prop="age">
          </el-table-column>
          <el-table-column
              label="地址"
              align="center"
              prop="addr">
          </el-table-column>
        <el-table-column
            label="班级"
            align="center"
            prop="cname">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页导航-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
export default { //当前页所有学生信息
  data() {
    return {
      studentlist: [],
      page: 1,
      pageSize: 5,
      total: 100,
    }
  },
  created() {
    // 进行分页查询
    this.findBypage(this.page, this.pageSize);
  },

  methods: {
    findStudents() {
      this.$axios.get("/student/list.do")
          .then(res => {
            //this.studentlist = res.data;
            console.log("数据:",res.data)
            this.studentlist = res.data
          })
    },
    // 进行分页查询
    findBypage(page, pageSize) {
      this.$axios.get(`/student/findByPage.do?page=${page}&pageSize=${pageSize}`)
          .then(res => {
        console.log("分页数据：",res.data)
            this.studentlist= res.data.rows
            this.total = res.data.total
      })
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {//换页功能
      console.log(`当前页: ${val}`);
      this.page = val;
      this.findBypage(this.page, this.pageSize);
    }
    },
}
</script>
<style>
.el-card{
  width: 90%;
  margin: 0 auto;
}
.el-pagination{
  text-align: right;
  margin-top: 15px;
}
</style>
